<template>
  <div class="all">
<!--    <div style="position: sticky;top: 0">-->
    <div style="position: sticky;top: 0" class="header">
        <span @click="goBack()" class="fanhui">
          <img src="../../assets/返回.png" alt="">
          <span class="sides">返回</span>
        </span>
        <van-search
          v-model="searchValue"
          shape="round"
          placeholder="请输入搜索关键词"
          left-icon=""
          show-action
        >
          <template #left-icon>
            <div @click="onSearch">
              <van-icon name="search" />
            </div>
          </template>
          <template #action>
            <div style="" @click="onSearch" class="sousuo">搜索</div>
          </template>
        </van-search>
        <span></span>
      </div >
    <div class="video_content">
      <van-tabs
        v-model="active"
        sticky
        :offset-top="height + 'px'"
        swipeable
        animated
        color="#1da4f2"
        title-active-color="#1da4f2"
        line-width="15px"
        line-height="2px"
        @click="onClick"
        @change="onchange"
      >
        <van-tab
          v-for="(item, index) in tabList"
          :key="index"
          :title="item.name"
        >
          <div class="content">
            <ul
              class="ulList"
              @click="goPlay(video.VIDEO_URL, video.ID, video.VIDEO_TYPE)"
              v-for="(video, videoIndex) in videoArr"
              :key="videoIndex"
            >
              <li>
                <img
                  class="videoImg"
                  v-if="video.VIDEO_IMG !== undefined && video.VIDEO_IMG !== ''"
                  :src="video.VIDEO_IMG"
                  alt=""
                />
                <img
                  class="videoImg"
                  v-else
                  src="../../assets/康护到家.png"
                  alt=""
                />
                <div class="playImg">
                  <img src="../../assets/播放@2x.png" alt="">
                </div>
                <p class="playDuration">{{video.VIDEO_DURATION}}</p>
              </li>
              <li class="li_videoBottom">
                <p class="videoTitle">{{ video.VIDEO_TITLE }}</p>
                <p class="videoIntro">{{video.VIDEO_INTRO}}</p>
                <p class="isuser">
                  <span>
                      <img class="isuser_img" :src="
                          video.PHOTO.substring(0, 4) === 'http' ? video.PHOTO : imgHttp + video.PHOTO
                          " alt="">
                      {{video.VIDEO_UPLOADER}}
                  </span>
                  <span>
                    <img class="playNumber" src="../../assets/播放量.png" alt="">
                    {{video.VIDEO_CLICKNUM}}</span>
                </p>
              </li>
            </ul>
          </div>
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>

<script>
import $ from 'jquery'
import videoHttp from '../../http/video.http'
export default {
  name: 'VideoList',
  data () {
    return {
      show: false,
      sortIndex: -1,
      videoArr: [],
      isSelAll: true,
      searchValue: '',
      imgHttp: videoHttp.imgHttp,
      active: '',
      tabList: [],
      height: 0
    }
  },
  activated () {
  },
  mounted () {
    this.getList()
    this.getVideo(this.active, this.value)
    this.height = $('.header').height()
    $('.video_content').css('height', $(window).height() - $('.header').height())
  },
  methods: {
    // 点击搜索
    onSearch () {
      this.getVideo(this.active, this.searchValue)
    },
    // 点击返回
    goBack () {
      this.$router.history.go(-1)
    },
    // 点击视频跳转
    goPlay (url, videoId, videoType) {
      // axios.get('http://jmx-kfdj.com/kfhl/minivideo/videoclick', {params: {ID: videoId}})
      this.$http.videoclick({ID: videoId})
        .then(res => {
          // console.log(res)
          // this.videoArr = res.data
          this.$router.push({path: '/playVideo',
            query: {
              videoUrl: url, // 视频链接
              videoId: videoId, // 视频id
              videoType: videoType, // 视频类型
              userid: this.$utils.getUrlKey('userid') // JSON.parse(local.get('dataJson')).USER_ID // 用户userid
            }})
        })
        .catch(err => {
          console.log(err)
        })
    },
    // 视频类型筛选 选择
    onClick () {
      this.getVideo(this.active, this.searchValue)
    },
    onchange () {
      this.getVideo(this.active, this.searchValue)
    },
    // 获取视频 http://jmx-kfdj.com/kfhl/minivideo/getVideosByType
    getVideo (type, key) {
      if (Number(type) === 0) {
        type = ''
      }
      this.$http.getVideosByType({VIDEO_TYPE: type, KEY: key})
        .then(res => {
          console.log(res)
          this.videoArr = res.data
        })
        .catch(err => {
          console.log(err)
        })
    },
    // 获取视频分类数据
    getList () {
      this.$http.videoList({})
        .then(res => {
          console.log(res.data)
          for (var i = 0; i < res.data.length; i++) {
            var obj = { name: res.data[i].TYPE_NAME, id: res.data[i].ID }
            this.tabList.push(obj)
          }
          var add = {
            name: '全部',
            id: ''
          }
          this.tabList.unshift(add)
        })
        .catch(err => {
          console.log(err)
        })
    }
  }
}
</script>

<style scoped>
  *{
    margin: 0;
    padding: 0;
  }
  .all{
    width: 100vw;
    height: 92vh;
    /*background: #FAF9FE;*/
    overflow: scroll;
    background: #fff;
  }
  .header{
    width: 100%;
    height: 12vw;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: white;
    position: fixed;
    top: 0;
    z-index: 999;
    border-bottom: 1px solid #E5E5E5;
    overflow: hidden;
  }
  /deep/ .van-icon-search::before {
    content: '\F0AF';
    padding-left: 10px;
  }
  .fanhui{
    display: flex;
    align-items: center;
    margin-left: 15px;
    color: #1da4f2;
  }
  .fanhui  img{
    width: 7px;
    height: 13px;
    margin-right: 5px;
  }
  .sides{
    font-size: 15px;
    font-family: PingFang SC;
    font-weight: bold;
  }
  /deep/ .van-field__control{
    font-size: 15px;
    font-family: PingFang SC;
    font-weight: bold;
  }
  /deep/ .van-ellipsis{
    font-size: 15px;
    font-family: PingFang SC;
    font-weight: bold;
  }
  .sousuo{
    margin-left: 10px;
    color: #1DA4F2;
    font-size: 15px;
    font-family: PingFang SC;
    font-weight: bold;
  }
  .header input{
    width: 70vw;
    height: 8vw;
    border-radius: 6vw;
    border: none;
    background: #FAF9FE;
    font-size: 4vw;
    position: relative;
    margin-right: 3vw;
    padding-left: 15px;
    box-sizing: border-box;
  }
  .header input::placeholder{
    text-align: center;
    font-size: 4vw;
  }
  .video_content{
    width: 100%;
    overflow: auto;
  }
  .columnHeader span{
    margin-left: 3vw;
  }
  /*   视频内容*/
  .content {
    width: 95%;
    overflow: auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin: 0 auto;
  }
  .ulList{
    width: 49%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    /*background: linear-gradient(90deg, #1DA3F2 0%, #1DC7F2 100%);*/
  }
  .ulList:last-child {
    margin-bottom: 30px;
  }
  .ulList li{
    box-sizing: border-box;
  }
  .li_videoBottom{
    background: #FFFFFF;
    box-shadow: 0px 1px 30px 0px rgba(0, 0, 0, 0.05);
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    padding: 5px;
    box-sizing: border-box;
  }
  .time{
    /*display: flex;*/
    /*justify-content: flex-end;*/
    /*margin-top: -25px;*/
    /*height: 20px;*/
    /*line-height: 20px;*/
    /*background: linear-gradient(0deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0));*/
    /*border-radius: 0px 0px 10px 10px;*/
    font-size: 11px;
    font-family: PingFang SC;
    font-weight: 500;
    color: #999999;
    /*opacity: 0.8;*/
    /*padding-right: 10px;*/
    /*box-sizing: border-box;*/
    margin-top: 5px;
  }
  .ulList li{
    position: relative;
  }
  .videoImg {
    width: 100%;
    height: 100px;
    border-top-right-radius: 10px;
    border-top-left-radius: 10px;
    margin: 10px 0 0 0;
  }
  .playImg img{
    width: 20px;
    height: 20px;
    position: absolute;
    top: 45%;
    left: 45%;
  }
  .playDuration{
    width: 100%;
    height: 20px;
    text-align: right;
    position: absolute;
    bottom: 5px;
    font-size: 11px;
    color: #fff;
    padding-right: 5px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0));
  }
  .videoTitle{
    font-size: 14px;
    font-family: PingFang SC;
    font-weight: 500;
    color: #333333;
    margin-top: 5px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  /deep/ .van-tab__text--ellipsis{
    font-weight: bold;
    font-family: PingFang SC;
  }
  /deep/ .van-tab{
    color: #333333;
  }
  .videoIntro{
    font-size: 13px;
    font-family: PingFang SC;
    font-weight: 500;
    color: #999999;
    margin-top: 5px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .isuser{
    font-size: 11px;
    margin-top: 5px;
    color: #666;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .isuser img {
    margin-right: 5px;
    object-fit: cover;
  }
  .isuser span{
    display: flex;
    align-items: center;
  }
  .isuser_img{
    width: 12px;
    height: 12px;
    border-radius: 50%;
  }
  .playNumber{
    width: 13px;
    height: 10px;
  }
  /deep/ .van-search{
    width: 78%;
  }
  /deep/ .van-field__control{
    padding-left: 10px;
  }
  /*  下拉菜单*/
  /deep/ .van-dropdown-menu__bar{
    width: 30vw;
    box-shadow: none;
  }
  /deep/ .van-dropdown-menu__title::after{
    border-color: transparent transparent #333 #333;
  }
</style>
